<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
          <!-- 用一个行列布局 -->
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
            <el-col :span="20">
              <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="hAppend('')">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>


          <!-- 树形布局 -->
          <el-tree :data="list" >
            <template #default="{ data}">
              <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width:100%">
              <el-col :span="20">
              <svg-icon icon-class="home" /><span>{{data.name}}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{data.manager}}</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="hAppend(data.id)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="hEditor(data.id)">编辑子部门</el-dropdown-item>
                      <el-dropdown-item  v-if="data.children.length===0" @click.native="eleEditor(data.id)">删除子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
             </el-row>
            </template> 
          </el-tree>

      <!-- 弹出框 -->
      <el-dialog
          :title="isu?'编辑子组件':'添加子组件'"
        :visible.sync="dialogVisible"
          width="40%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="resetForm"
          >
          <deptDialog @vray="vrayjs" :originList="originList" @fal="dialogVisible=false" ref="refs" :isu="isu" :id="usrId"></deptDialog>
          </el-dialog>
      </el-card>   
    </div>
  </div>
</template>



<script>
import { getOrgan,eleSector } from "@/api/Organization";
import { treeForm } from "@/utils";
import deptDialog from "@/views/departments/deptDialog";
// console.log(treeForm);
  export default { 
    components:{
      deptDialog
    },
    data() {
      return {
        dialogVisible:false,
        list: [],
        usrId:'',//父组件id
        isu:false,//编辑部门
        originList:[]
      };
    },
    created(){
      this.loadOrgan()
    },
    methods: {
      // 重置表单
      resetForm(){
        this.$refs.refs.resetForm()
      },
      // 删除部门
      eleEditor(id){
      try {
         this.$confirm('是否删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const res =  await eleSector(id)
          this.loadOrgan()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      } catch (error) {
        console.log(res);
      }
      },
      // 编辑子部门
      hEditor(id){
        this.dialogVisible=true
        this.isu=true
        this.usrId = id
        this.$nextTick(()=>{
          this.$refs.refs.loadSector()
          // console.log(this.$refs.refs.loadSector());
        });
      },
      // 获取父组件id值 传入子组件
      hAppend(id){
        this.dialogVisible=true
        this.isu=false
        this.usrId=id  
      },
      // 渲染页面
      vrayjs(){
        this.loadOrgan()
        this.dialogVisible=false
      },
      // 获取部门信息
     async loadOrgan(){
      try {
        const res = await getOrgan()
      res.data.depts.shift()
      this.list = treeForm(res.data.depts)
      // console.log(res);
      this.originList = res.data.depts.map(item =>{
        return {id:item.id,pid:item.pid,name:item.name,code:item.code}
        
      })
      } catch (error) {
        
      }
      
      }
      }
    
  };
</script>